<template>
  <div class="in">
    <div class="tit">
      <div class="ul1">
        <div v-for="(item,index) in list"
             :key="index"
             :class="{sta:ind==index}"
             @click="stab(index)">{{item}}</div>
      </div>
    </div>
    <div class="list">
      <div class="item"
           v-for="(item,index) in list1"
           :key="index">
        <div class="shangpin"
             v-if="ind==0">
          <img class="img"
               :src="item.imgurl"
               @click="link(item.goodsId)"
               style="cursor:pointer;">
          <div class="title"
               @click="link(item.goodsId)"
               style="cursor:pointer;">
            <div class="a">{{item.name}}</div>
            <div class="b">{{item.category==1?'服务商品':'普通商品'}}</div>
            <div class="c">￥ <span>{{item.price?item.price.toFixed(2):item.price}}</span></div>
          </div>
          <el-button plain
                     @click="escgoods(item.goodsId)">取消收藏</el-button>
        </div>
        <div class="dianpu"
             v-else
             @click="link(item.shopId)">
          <img class="img"
               :src="item.logo" />
          <div class="title">
            <div class="a">{{item.shopName}}</div>
            <div class="b">
              <span>规模：{{item.scale||0}}人</span>
              <span>所在地区：{{item.province}} {{item.city}} {{item.area}}</span>
              <span>工作日：{{item.times}}</span>
            </div>
            <div class="c">{{item.intro}}</div>
          </div>
          <el-button plain
                     class="anniu"
                     @click.stop="escgoods(item.shopId)">取消收藏</el-button>
        </div>
      </div>
      <div class="wu"
           v-if="list1.length==0">暂无数据</div>
      <el-pagination background
                     layout="prev, pager, next"
                     :total="total"
                     :page-size="pageSize"
                     :current-page.sync="pageNum"
                     @current-change="handleCurrentChange"
                     prev-text="上一页"
                     next-text="下一页"
                     class="aut">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ind: 0,
      list: ['商品收藏', '店铺收藏'],
      list1: [],
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getlist()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() { },
  //计算属性
  computed: {},
  //方法
  methods: {
    getlist() {
      this.$postRequest('/api/memberCollect/getCollectList', {
        userId: localStorage.getItem('userId'),
        status: this.ind,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.list1 = res.data.list
        this.total = res.data.total
      })
    },
    link(id) {
      this.$router.push({ name: this.ind == 1 ? 'business' : 'detail', query: { id: id } })
    },
    escgoods(id) {
      this.$confirm('是否取消收藏' + (this.ind == 1 ? '该店铺' : '该商品'), '取消收藏', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postRequest('/api/memberCollect/saveCollect', {
          userId: localStorage.getItem('userId'),
          status: this.ind,
          collectId: id
        }).then(res => {
          this.$message.success('取消收藏成功')
          this.pageNum = this.list1.length > 1 || this.pageNum == 1 ? this.pageNum : (this.pageNum - 1)
          this.getlist()
        })
      })
    },
    stab(i) {
      if (this.ind != i) {
        this.ind = i
        this.pageNum = 1;
        this.total = 0;
        this.list1 = []
        this.getlist()
      }
    },
    handleCurrentChange(currentPage) {
      this.getlist()
    },
  }
}
</script>
<style scoped lang='scss'>
.in {
  width: 100%;
  background: #ffffff;
  border: 1px solid #eeeeee;
  .tit {
    width: 100%;
    height: 50px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ul1 {
      display: flex;
      height: 100%;
      align-items: center;
      div {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        cursor: pointer;
        &.sta {
          color: #1a69e0;
          position: relative;
          &::after {
            content: '';
            width: 100px;
            height: 2px;
            background: #1a69e0;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }
      }
    }
  }
  .list {
    width: 100%;
    background: #fff;
    .item {
      padding: 20px 30px 20px 20px;
      border-bottom: 1px solid #eeeeee;
      cursor: pointer;
      &:hover {
        box-shadow: 0px 2px 14px 1px rgba(133, 133, 133, 0.15);
      }
      .shangpin {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .img {
          width: 150px;
          height: 150px;
          background: #ffffff;
          border: 1px solid #f9f9f9;
          margin-right: 16px;
        }
        .title {
          flex: 1;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          .a {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
          .b {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #747474;
            margin: 20px 0;
          }
          .c {
            height: 19px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #e0441a;
            span {
              font-size: 24px;
            }
          }
        }
      }
      .dianpu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .img {
          width: 150px;
          height: 150px;
          background: #ffffff;
          border: 1px solid #f9f9f9;
          margin-right: 16px;
        }
        .title {
          flex: 1;
          .a {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #000000;
          }
          .b {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin: 20px 0;
            span {
              margin-right: 50px;
            }
          }
          .c {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 20px;
          }
        }
        .anniu {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .aut {
      text-align: center;
      margin-top: 14px;
      margin-bottom: 14px;
    }
    /deep/ .el-pagination button,
    .el-pagination span:not([class*='suffix']) {
      width: 60px;
    }
    .wu {
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
}
</style>